<!--
  Generated template for the GoodsdetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar>
        <ion-segment [(ngModel)]="tabs">
          <ion-segment-button value="plist">
            商品
          </ion-segment-button>
          
          <ion-segment-button value="pcontent">
            详情
          </ion-segment-button>
        </ion-segment>
      </ion-navbar>
</ion-header>


<ion-content>

        <div class="p_content">
    
            <div [ngSwitch]="tabs">
              <div class="con_1" *ngSwitchCase="'plist'">
                  <div class="p_img">
                      <!-- <img [src]= "config.apiUrl+item.pic" /> -->
                    <img [src]="config.apiUrl+item.pic" />              
                  </div>
                  <div class="p_info mb10">
                      <div class="p_title">
                          <h2>{{item.title}}</h2>
                          <p>{{item.sub_title}}</p>
                      </div>
    
                      <div class="product_price mb10">
                        <span class="now_price">特价：<span class="price">¥{{item.price}}</span></span> 　 　原价：<span class="old_price"> ¥{{item.old_price}}</span> 
                      </div>
                  </div>
    
                <div class="p_attr mb10">
                    <div #myAttr id="myattr">
                        <div *ngIf="item.attr">
                            <div class="color" *ngFor="let attr of item.attr">
                                <strong>{{attr.cate}}</strong>   
                                <!-- 默认绑定第一个 -->
                                <span *ngFor="let c of attr.list;let key=index;" [ngClass]="{'active':key==0}">{{c}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="number">
                        <strong>数量:</strong>
                        <div class="cart_number">
                            <div class="input_left" (tap)="delNum()">-</div>
                                <div class="input_center">
                                    <input type="text"  readonly="readonly" [(ngModel)]="num" name="num" id="num" />
                                </div>
                                <div class="input_right" (tap)="addNum()">+</div>
                        </div>
                    </div>
                </div>
    
                    <div class="fee mb10">
                      运费:免运费
                    </div>
    
              </div>
            
              <div class="con_2" *ngSwitchCase="'pcontent'">
                  <!-- angular绑定html网页 -->
                  <div [innerHTML]='item.content'>
                  </div>
              </div>
              
            </div>
    
          </div>
    </ion-content>


<!-- 底部条 -->
<ion-footer>
    <ion-toolbar>
        <div class="footer_bar">
          <div class="carticon" [navPush]="CartPage">            
              <ion-icon name="cart"></ion-icon> 
              <p>购物车</p>
              <ion-badge color="danger">{{carts_num}}</ion-badge>
          </div>
          
          <div class="addcart" (click)="addCart()">
              加入购物车
          </div>
          <div class="buy">
              立即购买
          </div>
        </div>
  
    </ion-toolbar>
</ion-footer>
